<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>评分</title>
  <link href="css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/weui.css">
  <link rel="stylesheet" href="css/jquery-weui.css">
  <link rel="stylesheet" href="css/common.css">
</head>
<style>

.rating {
  float: right;
  margin-right: 20px;
}

.hidden {
  opacity: 0;
}

.star {
  display: inline-block;
  font-size: 24px;
  color: whitesmoke;
  position: relative;
  margin: 5px 6px 0 0;
}

.star.animate {
  animation: stretch-bounce .5s ease-in-out;
}

.animate.hidden {
  opacity: 0;
}

.full {}

.full:before {
  font-family: fontAwesome;
  display: inline-block;
  content: "\f005";
  position: relative;
  float: right;
  z-index: 2;
}

.half:before {
  font-family: fontAwesome;
  content: "\f089";
  position: absolute;
  float: left;
  z-index: 3;
}

.star-colour {
  color: #ffd700;
}

@keyframes stretch-bounce {
  0% {
    -webkit-transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.5);
  }
  50% {
    -webkit-transform: scale(0.9);
  }
  75% {
    -webkit-transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

.selected:before {
  font-family: fontAwesome;
  display: inline-block;
  content: "\f005";
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1);
  opacity: 1;
  z-index: 1;
}

.selected.pulse:before {
  transform: scale(3);
  opacity: 0;
}

.selected.is-animated:before {
  transition: 1s ease-out;
}

.score {
  font-family: arial;
  font-size: 20px;
  color: green;
  margin-top: 80px;
  margin-left: 50px;
}

.score-rating {
  /* vertical-align: sup; */
  top: -5px;
  position: relative;
  font-size: 150%;
}

.total {
  vertical-align: sub;
  top: 0px;
  position: relative;
  font-size: 100%;
}

.average {
  font-family: arial;
  font-size: 20px;
  color: indianred;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.average .score-average {
  padding-top: 30px;
}
</style>

<body>
  <div class="weui-cells">
    <div class="weui-cell " data-type='speedRank'>
      <div class="weui-cell__hd">处理速度</div>
      <div class="weui-cell__bd">
        <!-- 星星 -->
        <div class="rating" data-vote="0">
          <div class="star hidden">
            <span class="full" data-value="0"></span>
            <span class="half" data-value="0"></span>
          </div>
          <div class="star">
            <span class="full" data-value="1"></span>
            <span class="half" data-value="0.5"></span>
            <span class="selected"></span>
          </div>
          <div class="star">
            <span class="full" data-value="2"></span>
            <span class="half" data-value="1.5"></span>
            <span class="selected"></span>
          </div>
          <div class="star">
            <span class="full" data-value="3"></span>
            <span class="half" data-value="2.5"></span>
            <span class="selected"></span>
          </div>
          <div class="star">
            <span class="full" data-value="4"></span>
            <span class="half" data-value="3.5"></span>
            <span class="selected"></span>
          </div>
          <div class="star">
            <span class="full" data-value="5"></span>
            <span class="half" data-value="4.5"></span>
            <span class="selected"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="weui-cell " data-type='qualityRank'>
      <div class="weui-cell__hd">服务质量</div>
      <div class="weui-cell__bd">
        <!-- 星星 -->
        <div class="rating" data-vote="0">
          <div class="star hidden">
            <span class="full" data-value="0"></span>
            <span class="half" data-value="0"></span>
          </div>
          <div class="star">
            <span class="full" data-value="1"></span>
            <span class="half" data-value="0.5"></span>
            <span class="selected"></span>
          </div>
          <div class="star">
            <span class="full" data-value="2"></span>
            <span class="half" data-value="1.5"></span>
            <span class="selected"></span>
          </div>
          <div class="star">
            <span class="full" data-value="3"></span>
            <span class="half" data-value="2.5"></span>
            <span class="selected"></span>
          </div>
          <div class="star">
            <span class="full" data-value="4"></span>
            <span class="half" data-value="3.5"></span>
            <span class="selected"></span>
          </div>
          <div class="star">
            <span class="full" data-value="5"></span>
            <span class="half" data-value="4.5"></span>
            <span class="selected"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="weui-cell " data-type='attitudeRank'>
      <div class="weui-cell__hd">维修态度</div>
      <div class="weui-cell__bd">
        <!-- 星星 -->
        <div class="rating" data-vote="0">
          <div class="star hidden">
            <span class="full" data-value="0"></span>
            <span class="half" data-value="0"></span>
          </div>
          <div class="star">
            <span class="full" data-value="1"></span>
            <span class="half" data-value="0.5"></span>
            <span class="selected"></span>
          </div>
          <div class="star">
            <span class="full" data-value="2"></span>
            <span class="half" data-value="1.5"></span>
            <span class="selected"></span>
          </div>
          <div class="star">
            <span class="full" data-value="3"></span>
            <span class="half" data-value="2.5"></span>
            <span class="selected"></span>
          </div>
          <div class="star">
            <span class="full" data-value="4"></span>
            <span class="half" data-value="3.5"></span>
            <span class="selected"></span>
          </div>
          <div class="star">
            <span class="full" data-value="5"></span>
            <span class="half" data-value="4.5"></span>
            <span class="selected"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__bd">
        <textarea class="weui-textarea" placeholder="请输入文本" rows="3"></textarea>
        <div class="weui-textarea-counter"><span>0</span>/200</div>
      </div>
    </div>
  </div>
  <button class='weui-btn weui-btn_primary' id='btnSub'>提交</button>
</body>
<script src="js/jquery.js"></script>
<script src="js/jquery-weui.min.js"></script>
<script src='js/rate.js'></script>
</html>
